<template>
  <Dropdown placement="right">
    <!--<a href="javascript:void(0)">-->
    <!--<Icon type="md-home" size="22"></Icon>-->
    <!--</a>-->
    <!--<DropdownMenu slot="list">-->
    <!--<DropdownItem>驴打滚</DropdownItem>-->
    <!--<DropdownItem>炸酱面</DropdownItem>-->
    <!--<DropdownItem>豆汁儿</DropdownItem>-->
    <!--<Dropdown placement="right-start">-->
    <DropdownItem>
      {{menuItem.name}}
      <Icon type="ios-arrow-forward"></Icon>
    </DropdownItem>
    <DropdownMenu slot="list">
      <div v-for="(obj,idx) in menuItem.children" :key="idx">
        <DropdownItem v-if="obj.children.length === 0" :name="obj.path">{{obj.name}}</DropdownItem>
        <sider-tree v-else :menuItem="obj"></sider-tree>
      </div>
    </DropdownMenu>
  </Dropdown>
</template>

<script>
  export default {
    name: 'siderTree',
    props: {
      menuItem: Object,
      parentId: String
    },
    data () {
      return {

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
